<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消耗品领用管理-云校通_教师版</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/style/weui.css" />
<link rel="stylesheet" href="<%=basePath%>/css/xcgl_kcgl.css" />
<link rel="stylesheet" href="<%=basePath%>/style/icon.css" />
<style>
.main {
	background: #fff;
}
.weui_panel_bd {
	border-bottom: 1px solid #ccc;
}
.weui_panel_bd .icon {
	position: absolute;
	right: 4%;
}
.weui_panel_bd .big_size {
	float: left;
	margin-bottom: 8px;
	margin-right: 12%;
	font-size: 15px;
}
.btnBox {
	position: fixed;
	right: 8%;
	bottom: 70px;
	width: 70px;
	height: 70px;
}
.btnBox img {
	width: 80px;
	height: 80px;
}
.detelist {
	width: 100%;
	background: #fff;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
	padding-top: 10px;
}

.detelist ul {
	position: relative;
	clear: both;
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 4%;
}

.detelist ul li {
	width: 46%;
	font-size: 16px;
}

.detelist ul .right {
	position: absolute;
	right: 80px;
	top: 10px;
}
.detelist h4{
        margin-left: 4%;
        font-size: 16px;
        font-weight: normal;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .detelist p{
        width: 92%;
        margin-left: 4%;
        padding-bottom: 10px;
      }

.massage {
	width: 100%;
	margin-top: 8px;
	background: #fff;
}

.massage h4 {
	margin-left: 4%;
	font-size: 16px;
	font-weight: normal;
	padding-top: 10px;
	padding-bottom: 10px;
}

.massage p {
	width: 92%;
	margin-left: 4%;
	padding-bottom: 20px;
}

.weui_btn_area {
	margin-top: 80px;
}
</style>
</head>

<body ontouchstart>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div id="all" style="display:block;">
		<div class="weui-header bg-blue">
			<div class="weui-header-left">
				<a href="<%=basePath%>/ls/school/property/home" class="icon icon-109 f-white">返回</a>
			</div>
			<h1 class="weui-header-title">领用记录</h1>
		</div>
		<div class="main" style="padding-bottom: 60px;">
			<div id="list"></div>
		</div>
		<div class="btnBox">
			<a href="consumablesApplyIndex/add"><img
				src="<%=basePath%>/images/addBtnnew.png"></a>
		</div>
	</div>
	<div id="detail" style="display:none;padding-bottom: 60px;">
		<div class="weui-header bg-blue">
			<div class="weui-header-left">
				<a onclick="lists()" class="icon icon-109 f-white">关闭</a>
			</div>
			<h1 class="weui-header-title">领用详情</h1>
		</div>
		<div class="detelist" style="padding-bottom: 15px;">
			<ul>
				<li>领用人</li>
				<li class="right" id = "usedName"></li>
			</ul>
			<ul>
				<li>物品类别</li>
				<li class="right" id="type"></li>
			</ul>
			<ul>
				<li>物品名称</li>
				<li class="right" id="goodsName"></li>
			</ul>
			<ul>
				<li>型号</li>
				<li class="right" id="goodsAttr"></li>
			</ul>
			<ul>
				<li>数量</li>
				<li class="right" id="number"></li>
			</ul>
			<div class="describe">
				<h4>描述</h4>
				<p id="describe"></p>
	  		</div>
			<ul>
				<li>领用日期</li>
				<li class="right" id="createTime"></li>
			</ul>
		</div>
	</div>
	<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
	<script src="<%=basePath%>/js/zepto.min.js"></script>
	<script src="<%=basePath%>/js/swipe.js"></script>
	<script>
		window.onload = function() {
			var page = 0, size = 5;
			$('.main')
					.dropload(
							{
								scrollArea : window,
								autoLoad : true,
								domDown : {
									domClass : 'dropload-down',
									domRefresh : '<div class="dropload-refresh f10 " ><i class="icon icon-20"></i>上拉加载更多</div>',
									domLoad : '<div class="dropload-load f10"><span class="weui-loading"></span>正在加载中...</div>',
									domNoData : '<div class="dropload-noData">没有更多数据了</div>'
								},
								domUp : {
									domClass : 'dropload-up',
									domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
									domUpdate : '<div class="dropload-load f10"><i class="icon icon-20"></i>释放更新...</div>',
									domLoad : '<div class="dropload-load f10"><span class="weui-loading"></span>正在加载中...</div>'
								},
								loadDownFn : function(me) {
									page++;
									window.params = {
										page : page,
										rows : size,
										cycleUse : '0'
									};
									$.ajax({
												url : basePath
														+ "/ls/school/property/outputRecord/query",
												type : "post",
												dataType : "json",
												data : window.params,
												success : function(data) {
													if (data.data.rows.length == 0
															|| window.params.page
																	* window.params.rows >= data.data.total) {
														me.lock();
														me.noData();
													}
													// 为了测试，延迟1秒加载
													setTimeout(
															function() {
																loadDataToHtml(data.data);
																me.resetload();
															}, 500);
												},
												error : function(xhr, type) {
												}
											});
								}
							});
		}
		function loadDataToHtml(data) {
			if (data.rows.length > 0) {
				var html = "";
				for ( var i in data.rows) {
					var item = data.rows[i];
					var temp = JSON.stringify(item);
					html += '<div class="weui_panel_bd clear" onclick="detail(this)">\
					         <div style="display:none" id="info">'
							+ temp
							+ '</div>\
					         <div class="weui_media_box weui_media_text">\
									<h4 class="weui_media_title">领用人: '
							+ item.usedName
							+ '</h4>\
									<span class="icon icon-108"></span>\
									<p class="weui_media_desc big_size">物品名称: '
							+ item.goodsName
							+ '</p>\
									<p class="weui_media_desc big_size">数量: '
							+ item.number
							+ '</p>\
									<p class="weui_media_desc clear">领用日期: '
							+ new Date(item.createTime).format('yyyy年 MM月 dd日 hh:mm:ss')
							+ '</p>\
					         </div>\
		                 </div>';
				}
				$('#list').append(html);
			}
		}
		function detail(item) {
			var temp =  $(item).find("#info").html().trim();
			if(temp != null){
				var json = $.parseJSON(temp);
			    $("#usedName").html(json.usedName);
			    $("#usedPlace").html(json.usedPlace);
			    $("#type").html(json.typeName);
			    $("#goodsName").html(json.goodsName);
			    $("#goodsAttr").html(json.goodsAttr);
			    $("#number").html(json.number);
			    $("#describe").html(json.describe);
			    $("#createTime").html(new Date(json.createTime).format('yyyy.MM.dd hh:mm:ss'));
			}
			$("#all").css('display','none');
			$("#detail").css('display','block');
			
		}
		function lists() {
			$("#all").css('display','block');
			$("#detail").css('display','none');
		}
		
		Date.prototype.format = function(fmt) {
			var o = {
				"M+" : this.getMonth() + 1,
				"d+" : this.getDate(),
				"h+" : this.getHours(),
				"m+" : this.getMinutes(),
				"s+" : this.getSeconds(),
				"q+" : Math.floor((this.getMonth() + 3) / 3),
				"S" : this.getMilliseconds()
			};
			if (/(y+)/.test(fmt)) {
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
						.substr(4 - RegExp.$1.length));
			}
			for ( var k in o) {
				if (new RegExp("(" + k + ")").test(fmt)) {
					fmt = fmt.replace(RegExp.$1,
							(RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k])
									.substr(("" + o[k]).length)));
				}
			}
			return fmt;
		}
	</script>
</body>
</html>
